<template>
  <q-btn @click="show" class="col" icon="add" padding="sm" color="primary" label="添加起点">
    <q-dialog v-model="visible">
      <q-card style="max-width: 95vw; max-height: calc(100vh - 2rem);  overflow-x: hidden">
        <q-card-section class="text-h6">添加取货信息</q-card-section>
        <q-separator/>
        <div style="max-height: calc(100vh - 10rem); overflow-y: auto">
          <q-card-section class="q-gutter-sm text-center">
            <map-pose-selector v-model="sender.poseID" label="放货工位点" filter="catch"/>
            <posture-selector outlined v-model="sender.posture"/>
            <q-input outlined v-model="sender.count" label="数量"/>
            <q-input outlined v-model="sender.specs" label="规格"/>
          </q-card-section>
          <q-slide-transition>
            <div v-show="!incomplete" class="bg-primary">
              <q-btn unelevated class="full-width text-subtitle1 text-bold"
                     color="primary" label="添加取货信息" @click="addOrigin"/>
            </div>
          </q-slide-transition>
        </div>
      </q-card>
    </q-dialog>
  </q-btn>
</template>

<script>
import MapPoseSelector from 'components/mapPose/pose/MapPoseSelector.vue'
import PostureSelector from 'components/transport/catch/posture/PostureSelector.vue'
import { computed, ref } from 'vue'

export default {
  name: 'AddCatchSender',
  components: { PostureSelector, MapPoseSelector },
  props: {
    modelValue: Array
  },
  setup (props, context) {
    const visible = ref(false)
    const sender = ref({
      poseName: '',
      count: '',
      specs: '',
      posture: '',
      poseID: ''
    })
    return {
      visible,
      sender,
      incomplete: computed(() =>
        sender.value.count === '' ||
        sender.value.posture === '' ||
        sender.value.poseID === ''),
      show () {
        visible.value = true
        sender.value = {
          poseName: '',
          count: '',
          specs: '',
          posture: '',
          poseID: ''
        }
      },
      addOrigin () {
        visible.value = false
        const senderList = props.modelValue
        senderList.push(sender.value)
        context.emit('update:modelValue', senderList)
      }
    }
  }
}
</script>
